@import "@/styles/variables.scss";

@mixin setPosition($index: 1) {
  background-position: calc(-60px * $index) -70px;
}
.container {
  width: 100%;
  height: $footer;
  background-color: $bgGrayColor;
  color: #333;
  position: relative;
  bottom: 0;
  left: 0;
  color: #999;

  .main {
    height: $footerContent;
    @include normalFlex();
    font-size: 12px;
    padding-top: 20px;
  }

  .footer-left {
    & > div {
      margin: 10px 0;
    }
    & > div > a {
      margin-right: 5px;
      color: #999;
    }
    & > div > a:hover {
      text-decoration: underline;
    }
    .policy {
      color: #666;
      margin-right: 10px;
    }
  }

  .footer-right {
    height: 100%;
    line-height: $footerContent;
    width: 330px;
    @include normalFlex();
    a {
      display: inline-block;
      width: 60px;
      height: 70px;
      @include ftSprider();
    }
    .icon1 {
      background-position: -60px -70px;
    }
    .icon2 {
      background-position: 0 -70px;
    }
    .icon3 {
      background-position: 0 10px;
    }
    .icon4 {
      background-position: -60px 10px;
    }
  }
}
